import { FC, Fragment, useState, useEffect } from 'react'
import axios from 'axios';
import TabHouse from '../TabHouse/index'
import { Picker, List, WhiteSpace } from 'antd-mobile';
import { createForm } from 'rc-form';
import arrayTreeFilter from 'array-tree-filter';
import './style.scss'


const district = [
	{
	  "value": "340000",
	  "label": "安徽省",
	  "children": [{
	    "value": "341500",
	    "label": "六安市",
	    "children": [{
	      "value": "341522",
	      "label": "霍邱县",
	      "children": []
	    }, {
	      "value": "341525",
	      "label": "霍山县",
	      "children": []
	    }, {
	      "value": "341502",
	      "label": "金安区",
	      "children": []
	    }, {
	      "value": "341524",
	      "label": "金寨县",
	      "children": []
	    }, {
	      "value": "341526",
	      "label": "其它区",
	      "children": []
	    }, {
	      "value": "341521",
	      "label": "寿县",
	      "children": []
	    }, {
	      "value": "341523",
	      "label": "舒城县",
	      "children": []
	    }, {
	      "value": "341503",
	      "label": "裕安区",
	      "children": []
	    }]
	  }, {
	    "value": "340500",
	    "label": "马鞍山市",
	    "children": [{
	      "value": "340506",
	      "label": "博望区",
	      "children": []
	    }]
	  }, {
	    "value": "341800",
	    "label": "宣城市",
	    "children": [{
	      "value": "341822",
	      "label": "广德县",
	      "children": []
	    }, {
	      "value": "341824",
	      "label": "绩溪县",
	      "children": []
	    }, {
	      "value": "341825",
	      "label": "旌德县",
	      "children": []
	    }]
	  }]
	}
]

export type ValItemProps = {
  lable: string,
  value: string,
  title: string,
  activeArr: any[],
  children: any[],
  single: boolean
}

const DialogFirst: FC<any> = (props) => {

  const { getFieldProps } = props.form
  const [disList, setDisList] = useState<any[]>([])
  // list
  const [list, setList] = useState<any[]>([])

  useEffect(() => {
    getCityList()
  }, [])

  const getCityList = async () => {
    const data = await axios.get('https://api-haoke-web.itheima.net/houses/condition?id=AREA%7Cdbf46d32-7e76-1196')
    console.log('dataL', data.data.body)
    const { area, subway, roomType, rentType, oriented, floor, characteristic } = data.data.body;
    setDisList([area, subway])
    // 户型： roomType  多选
    // 朝向： oriented // 单选
    // 楼层： floor // 单选
    // 房屋亮点：characteristic 多选
    setList(
       [
         {
           value: 'roomType',
           title: '户型',
           single: false,
           activeArr: [], // 放置选中的项目
           children: roomType
         },
         {
           value: 'oriented',
           title: '朝向',
           single: true,
           activeArr: [], // 放置选中的项目
           children: oriented
         },
         {
          value: 'floor',
          title: '楼层',
          single: true,
          activeArr: [], // 放置选中的项目
          children: floor
         },
         {
          value: 'characteristic',
          title: '房屋亮点',
          single: false,
          activeArr: [], // 放置选中的项目
          children: characteristic
         },
       ]
    )
  }

  useEffect(() => {
    console.log('list...:', list)
  }, [list])

  const handleItemClick = ({item, val}:any) => {
    if (!item.single) {
      if (val.checked) {
        val.checked = false;
        // 删除收集数组
        item.activeArr.splice(item.activeArr.indexOf(val), 1)
      } else {
        val.checked = true;
        // 添加进入收集数组
        item.activeArr.push(val)
      }
    } else {
      item.activeArr = [val]
    }

    // 更新list数据, 指针要变，
    setList([...list])
  }

  const handleSubmitClick = () => {
    let arr:any = []
    list.forEach((val: ValItemProps) => {
      val.children?.forEach(i => {
        if (i.checked) {
          arr.push(i.value)
        }
      })
    })
    console.log('obj:', arr.join(','))
    axios.get('https://api-haoke-web.itheima.net/houses', {
      params: {
        cityId: 'AREA|dbf46d32-7e76-1196',
        area: null,
        price: null,
        rentType: null,
        more: arr.join(','),
        start: 1,
        end: 20,
      }
    })
  }


  return <div className="first">
    <div className="mask"></div>
    <div className="tip-wrapper">
      <div className="tip-tabs">
        <TabHouse />
      </div>
      <div className="tip-content">

        {
          list.map(item => {
            if(Array.isArray(item.children)) {
              return (<Fragment key={item.title}>
                <h2>{item.title}</h2>
                <ul>
                  {
                    item.children.map((val:any) => {
                      return <li
                        key={val.value}
                        className={item.activeArr.indexOf(val) !== -1 ? 'li-active': ''}
                        onClick={() => handleItemClick({item, val})}
                      >
                        {val.label}
                      </li>
                    })
                  }
                </ul>
                </Fragment>
              )
            } else {
              return null;
            }
          })
        }




        {/* <Picker extra="请选择(可选)"
            data={disList}
            title="Areas"
            {...getFieldProps('district', {
              initialValue: ['340000', '341500', '341502'],
            })}
            onOk={e => console.log('ok', e)}
            onDismiss={(e:any) => console.log('dismiss', e)}
          >
            <List.Item arrow="horizontal">Multiple & cascader</List.Item>
        </Picker> */}


      </div>
      <div className="tip-footer">
        <span>取消</span>
        <span onClick={() => handleSubmitClick()}>确定</span>
      </div>
    </div>
  </div>
}

DialogFirst.defaultProps = {
  tabs: [
    {

    }
  ]
}

export default createForm()(DialogFirst);
